<template>
  <el-card>
    <el-table :data="skuList" border v-loading="loading">
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片" prop="">
        <template v-slot="{ row }">
          <img
            :src="row.skuDefaultImg"
            :alt="row.skuName"
            style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作" width="230" align="center">
        <template v-slot="{ row }">
          <el-button
            type="info"
            size="small"
            :icon="Top"
            title="上架"
            @click="onSale(row.id)"
            v-if="row.isSale === 0" />
          <el-button
            type="success"
            size="small"
            :icon="Bottom"
            title="下架"
            @click="cancelSale(row.id)"
            v-else />
          <el-button type="primary" size="small" :icon="Edit" title="修改SKU" />
          <el-button
            type="info"
            size="small"
            :icon="Warning"
            title="查看SKU详情"
            @click="showDrawer(row.id)" />

          <el-popconfirm
            :title="`确定要删除${row.skuName}吗?`"
            @confirm="delSpuSaleAttr(row.id)">
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                title="删除SKU"></el-button
            ></template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="mt-20"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="prev, pager, next, jump, ->, sizes, total"
      :total="total"
      @size-change="getSkuList"
      @current-change="getSkuList" />

    <el-drawer v-model="drawer" :show-close="false" size="50%">
      <el-descriptions :column="1">
        <el-descriptions-item label="名称">
          {{ sku.skuName }}
        </el-descriptions-item>
        <el-descriptions-item label="描述">
          {{ sku.skuDesc }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">
          {{ sku.price }}
        </el-descriptions-item>
        <el-descriptions-item label="平台属性">
          <el-tag
            type="success"
            v-for="attr in sku.skuAttrValueList"
            :key="attr.id">
            {{ attr.attrName }} -- {{ attr.valueName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="销售属性">
          <el-tag
            type="success"
            v-for="saleAttr in sku.skuSaleAttrValueList"
            :key="saleAttr.id">
            {{ saleAttr.saleAttrName }} -- {{ saleAttr.saleAttrValueName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商品图片">
          <el-carousel height="600px" indicator-position="none">
            <el-carousel-item v-for="img in sku.skuImageList" :key="img.id">
              <img
                :src="img.imgUrl"
                :alt="img.imgName"
                class="sku__img--full" />
            </el-carousel-item>
          </el-carousel>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "JSku",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Delete, Top, Bottom, Edit, Warning } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

import {
  getSkuListApi,
  cancelSaleApi,
  onSaleApi,
  getSkuByIdApi,
  deleteSkuApi,
} from "@/api/product/sku";
import type {
  SkuList,
  AddOrUpdateSkuParams,
} from "@/api/product/model/skuModel";

// 定义数据
const skuList = ref<SkuList>([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 封装获取Sku列表数据展示
const getSkuList = async () => {
  loading.value = true;
  const res = await getSkuListApi(currentPage.value, pageSize.value);
  skuList.value = res.records;
  total.value = res.total;
  loading.value = false;
};
onMounted(getSkuList);

// 上架
const onSale = async (id: number) => {
  await onSaleApi(id);
  ElMessage.success("上架商品成功");
  getSkuList();
};
// 下架
const cancelSale = async (id: number) => {
  await cancelSaleApi(id);
  ElMessage.success("下架商品成功");
  getSkuList();
};

// 抽屉
const drawer = ref(false);
const sku = ref<AddOrUpdateSkuParams>({
  skuName: "",
  price: undefined,
  weight: undefined,
  skuDesc: "",
  skuImageList: [],
  skuDefaultImg: "",
  spuId: 0,
  category3Id: 0,
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});

// 点击展示抽屉
const showDrawer = async (id: number) => {
  drawer.value = true;
  sku.value = await getSkuByIdApi(id);
};

// 删除
const delSpuSaleAttr = async (id: number) => {
  await deleteSkuApi(id);
  ElMessage.success("删除成功~~");
  getSkuList();
};
</script>

<style scoped>
.sku__img--full {
  width: 100%;
  height: 100%;
}
</style>
